<template>
  <div>
    <el-row>
      <p>汇总方式：
        <el-radio-group v-model="type4">
          <el-radio :label="0">不汇总</el-radio>
          <el-radio :label="1">事业部</el-radio>
          <el-radio :label="2">事业部一级</el-radio>
          <el-radio :label="3">事业部二级</el-radio>
        </el-radio-group>
      </p>
    </el-row>
    <div class="__table">
      <el-button @click.prevent="dialogOpen"
                 v-if="!search"
                 class="__table_button"><i class="el-icon-plus"></i></el-button>
      <el-table
        :max-height="500"
        :data="sTable.data"
        style="width: 100%">
        <el-table-column
          type="expand"
          width="40px"
          class-name="expand"
          fixed="left">
          <template scope="s">
            <el-table :data="s.row.children"
                      style="width: 100%">
              <el-table-column
                prop="show_type"
                align="center"
                label="报销类型">
              </el-table-column>
              <el-table-column
                prop="number"
                align="center"
                min-width="200px"
                label="报销单号">
              </el-table-column>
              <el-table-column
                prop="reimbursementName"
                align="center"
                label="报销人员">
              </el-table-column>
              <el-table-column
                prop="show_settleCategory"
                align="center"
                label="结算类别">
              </el-table-column>
              <el-table-column
                prop="costItem"
                align="center"
                min-width="200px"
                label="费用项目">
              </el-table-column>
              <el-table-column
                prop="bankCardSettleAmout"
                align="center"
                min-width="150px"
                label="银行卡结算金额">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          width="40px"
          align="center"
          fixed="left">
        </el-table-column>
        <el-table-column
          prop="show_type"
          align="center"
          label="报销类型">
        </el-table-column>
        <el-table-column
          prop="number"
          align="center"
          min-width="220px"
          label="报销单号">
        </el-table-column>
        <el-table-column
          prop="reimbursementName"
          align="center"
          label="报销人员">
        </el-table-column>
        <el-table-column
          prop="departmentName"
          align="center"
          min-width="200px"
          label="所属部门">
        </el-table-column>
        <el-table-column
          prop="bearDepartmentName"
          align="center"
          min-width="200px"
          label="费用所属">
        </el-table-column>
        <el-table-column
          prop="show_settleCategory"
          align="center"
          label="结算类别">
        </el-table-column>
        <el-table-column
          prop="show_supplierId"
          align="center"
          min-width="200px"
          label="收款方">
        </el-table-column>
        <el-table-column
          prop="costItem"
          align="center"
          min-width="200px"
          label="费用项目">
        </el-table-column>
        <el-table-column
          prop="period"
          align="center"
          label="所属期间">
          <template scope="s">
            {{formatterTime(s.row.period, 22)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="estimatedSettleTime"
          align="center"
          width="120px"
          label="预计结算时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="结算信息">
          <el-table-column
            prop="settleAmout"
            align="center"
            label="报销金额">
            <template scope="s">{{SplitK(s.row.settleAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="debitAmout"
            align="center"
            label="扣款金额">
            <template scope="s">{{SplitK(s.row.debitAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="rewardAmout"
            align="center"
            label="奖励金额">
            <template scope="s">{{SplitK(s.row.rewardAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="actualSettleAmout"
            align="center"
            label="应结算">
            <template scope="s">{{SplitK(s.row.actualSettleAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="oilcardSettleAmout"
            align="center"
            label="油卡金额">
            <template scope="s">{{SplitK(s.row.oilcardSettleAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="cashAmout"
            align="center"
            label="现金金额">
            <template scope="s">{{SplitK(s.row.cashAmout)}}</template>
          </el-table-column>
          <el-table-column
            prop="remark"
            align="center"
            label="主体">
            <template scope="s">{{(s.row.remark)}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="其中银行账户信息">
            <el-table-column
              prop="cardBank"
              align="center"
              min-width="200px"
              label="开户行">
            </el-table-column>
            <el-table-column
              prop="accountNumber"
              align="center"
              min-width="200px"
              label="账号">
            </el-table-column>
            <el-table-column
              prop="accountName"
              align="center"
              min-width="200px"
              label="户名">
            </el-table-column>
            <el-table-column
              prop="bankCardSettleAmout"
              align="center"
              min-width="150px"
              label="银行卡结算金额">
              <template scope="s">{{SplitK(s.row.bankCardSettleAmout)}}</template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          v-if="!type4 && !search"
          class-name="operationMore"
          label="操作"
          width="120">
          <template scope="s">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="tableDelete(s.$index, s.row)" round></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <s-dialog :dialog="dialog">
      <p slot="title">结算单明细</p>
      <s-table :table="tableDialog"
               :multiSelect="true"
               :index="false"
               @http="tableWatch"
               ref="tableDialog">
        <el-table-column
          type="expand"
          slot="expand"
          class-name="expand"
          width="40px">
          <template scope="s">
            <el-card class="box-card">
              <div slot="header">
                <span style="line-height: 36px;">结算信息</span>
              </div>
              <el-form
                :model="s.row"
                class="__table_form"
                labelWidth="120px"
                :inline="true"
                label-position="left">
                <el-row>
                  <el-col :xs="24" :lg="{span: 4, offset: 0}">
                    <el-form-item prop="payee" label="扣款金额 ">
                      <div class="s-content">
                        {{SplitK(s.row.debitAmout)}}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 4, offset: 1}">
                    <el-form-item prop="payee" label="奖励金额 ">
                      <div class="s-content">
                        {{SplitK(s.row.rewardAmout)}}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 4, offset: 1}">
                    <el-form-item prop="payee" label="应结金额">
                      <div class="s-content">
                        {{SplitK(s.row.settleAmout)}}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 4, offset: 1}">
                    <el-form-item prop="payee" label="报销金额">
                      <div class="s-content">
                        {{SplitK(s.row.reimbursementAmout)}}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 4, offset: 1}">
                    <el-form-item prop="payee" label="借款金额">
                      <div class="s-content">
                        {{SplitK(s.row.tempBorrowing)}}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :lg="{span: 5, offset: 0}">
                    <el-form-item prop="oilcardSettleAmout"
                                  :rules="[
                                      { required: true, message: '不能为空', trigger: 'blur' },
                                      { type: 'number', message: '请输入数字', trigger: 'blur' }]"
                                  label="油卡金额">
                      <el-input v-model.number="s.row.oilcardSettleAmout"
                                placeholder="油卡金额"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 5, offset: 1}">
                    <el-form-item prop="cashAmout"
                                  :rules="[
                                      { required: true, message: '不能为空', trigger: 'blur' },
                                      { type: 'number', message: '请输入数字', trigger: 'blur' }]"
                                  label="现金金额 ">
                      <el-input v-model.number="s.row.cashAmout"
                                placeholder="现金金额"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 5, offset: 1}">
                    <el-form-item prop="payee" label="剩余结算">
                      <div class="s-content">
                        {{SplitK(s.row.actualSettleAmout - s.row.oilcardSettleAmout -s.row.cashAmout- s.row.cleared)}}
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 5, offset: 1}">
                  <el-form-item prop="payee" label="应结算 ">
                    <div class="s-content">
                      {{SplitK(s.row.actualSettleAmout)}}
                    </div>
                  </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :lg="{span: 5, offset: 0}">
                    <el-form-item prop="remark"
                                  label="主体">
                      <el-input v-model.number="s.row.remark"
                                placeholder="主体"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </template>
      </el-table-column>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="报销类型" prop="type">
              <el-select v-model="autoVue_tableDialog_type" placeholder="报销类型">
                <el-option
                  label="全部"
                  value="">
                </el-option>
                <el-option
                  label="成本费用"
                  value="expenseCost">
                </el-option>
                <el-option
                  label="暂借款"
                  value="borrowing">
                </el-option>
                <el-option
                  label="差旅"
                  value="travelExpense">
                </el-option>
                <el-option
                  label="奖励扣款"
                  value="rewardDeduction">
                </el-option>
                <el-option
                  label="结算单"
                  value="adviceSettlement">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="报销单号" prop="number">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableDialog_number"
                        placeholder="报销单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="结算类别" prop="settleCategory">
              <el-select v-model="autoVue_tableDialog_settleCategory" placeholder="结算类别">
                <el-option
                  label="全部"
                  value="">
                </el-option>
                <el-option
                  label="费用"
                  :value="2">
                </el-option>
                <el-option
                  label="成本"
                  :value="1">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="报销人员" prop="reimbursementName">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableDialog_reimbursementName"
                        placeholder="报销人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="收款方" prop="supplierName">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableDialog_supplierName"
                        placeholder="收款方"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="费用项目" prop="costItem">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableDialog_costItem"
                        placeholder="费用项目"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="预计结算" prop="estimatedSettlementTime">
              <el-date-picker
                v-model="autoVue_tableDialog_estimatedSettlementTime"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="单笔金额" prop="actualSettleAmout">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableDialog_actualSettleAmout"
                        placeholder="单笔金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item label="归属期间" prop="period">
              <el-date-picker
                v-model="autoVue_tableDialog_period"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </s-table>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, SplitK} from '~/plugins/Tools';

  /**
   * 报销单明细
   setoutTime  (string, optional): 时间$$$true$true$false$$1$vNull$false,
   setoutAddress  (string, optional): 地址$$$true$true$false$$2$vNull$false,
   arriveTime  (string, optional): 时间$$$true$true$false$$3$vNull$false,
   arriveAddress  (string, optional): 地点$$$true$true$false$$4$vNull$false,
   arriveCityLeave  (string, optional): 城市等级$$$true$true$true$urbanGrade$5$vNull$false,
   trafficMoney  (string, optional): 金额$$$true$true$true$urbanGrade$7$vNull,vNumber$false,
   trafficBillNumber  (string, optional): 单据张数$$$true$true$true$urbanGrade$6$vNull$false,
   travelDay  (string, optional): 天数$$$true$true$true$urbanGrade$8$vNull,vNumber$false,
   otherProject  (string, optional): 项目$$$true$true$true$urbanGrade$10$vNull$false,
   travelMoney  (string, optional): 金额$$$true$true$true$urbanGrade$9$vNull,vNumber$false,
   otherBillNumber  (string, optional): 单据张数$$$true$true$true$urbanGrade$11$vNull$false,
   otherMoney  (string, optional): 金额$$$true$true$true$urbanGrade$12$vNull,vNumber$false,
   */
  function __formDialog () {
    return {
      setoutTime: { value: new Date(), rule: [ 'vNull' ], type: 'Date' },
      setoutAddress: { value: '', rule: [ 'vNull' ] },
      arriveTime: { value: new Date(), rule: [ 'vNull' ], type: 'Date' },
      arriveAddress: { value: '', rule: [ 'vNull' ] },
      arriveCityLeave: { value: '2', rule: [ 'vNull__change' ] },
      trafficBillNumber: { value: '', rule: [ 'vNull', 'vNumber' ] },
      trafficMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
      travelDay: { value: '', rule: [ 'vNull', 'vNumber' ] },
      travelMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
      otherProject: { value: '', rule: [] },
      otherBillNumber: { value: '', rule: [ 'vNull', 'vNumber' ] },
      otherMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
    };
  }

  export default AutoVue({
    name: 'adviceSettlement',
    data: {
      sTable: {
        data: [],
        old: [],
      },
      formDialog: __formDialog(),
      dialog: {
        fullscreen: true,
        width: '100%',
        modal: false,
        formRef: false,
        index: '',
        row: {},
      },
      tableDialog: {
        column: [
          {'label': '报销类型', 'prop': 'show_type', 'minWidth': '0px', search: true},
          {'label': '报销单号', 'prop': 'number', 'minWidth': '200px', search: true},
          {'label': '报销人员', 'prop': 'reimbursementName', 'minWidth': '0px', search: true},
          {'label': '所属部门', 'prop': 'departmentName', 'minWidth': '200px', search: true},
          {'label': '费用所属', 'prop': 'bearDepartmentName', 'minWidth': '200px', search: true},
          {'label': '结算类别', 'prop': 'show_settleCategory', 'minWidth': '0px', search: true},
          {'label': '收款方', 'prop': 'show_supplierId', 'minWidth': '200px', search: true, searchName: 'supplierName'},
          {'label': '费用项目', 'prop': 'costItem', 'minWidth': '200px', search: true},
          {'label': '所属期间',
            'prop': 'period',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 22);
            },
            type: 'DateRange',
            search: true,
            'minWidth': '0px'},
          {'label': '预计结算时间', 'prop': 'estimatedSettleTime', 'minWidth': '120px', type: 'DateRange', search: true},
          {'label': '', 'prop': 'estimatedSettlementTime', 'minWidth': '120px', type: 'DateRange', search: true},
          {'label': '报销金额',
            'prop': 'settleAmout',
            'minWidth': '0px',
            search: true,
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '扣款金额',
            'prop': 'debitAmout',
            'minWidth': '0px',
            search: true,
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '奖励金额',
            'prop': 'rewardAmout',
            'minWidth': '0px',
            search: true,
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '应结算',
            'prop': 'actualSettleAmout',
            'minWidth': '0px',
            search: true,
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '油卡金额',
            'prop': 'oilcardSettleAmout',
            search: true,
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '现金金额',
            'prop': 'cashAmout',
            search: true,
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
        ],
        key: 'id',
        expand: true,
        option: {
          ids: [],
        },
        url: '/settlement/searchByPage',
        popover: {
          width: '660px',
        },
      },
      type4: 1,
    },
    store: [],
    props: {
      init: {
        type: Array,
      },
      search: {
        type: Boolean,
        default: false,
      },
      row: {
        type: Object,
        default () {
          return {};
        },
      },
    },
    methods: {
      SplitK,
      tableDelete (index, row) {
        this.$confirm('您将删除该条明细。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          this.sTable.old.splice(index, 1);
          this.tableOldWatch(this.sTable.old);
          this.$emit('change', this.sTable.old);
        });
      },
      formatterTableTime (row, column, cellValue) {
        return this.formatterTime(cellValue, 6);
      },
      summaryMethod ({ columns, data }) {
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          switch (index) {
          case 5:
          case 6:
          case 7:
          case 8:
          case 10:
          case 11:
          case 12:
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            } else {
              sums[index] = '';
            }
            break;
          default:
            sums[index] = '';
          }
        });

        return sums;
      },

      dialogInit () {
        this.tableClear('tableDialog');
        this.dialog.dialogInit.call(this);
      },
      async dialogOpen () {
        let ids = [];
        this.sTable.old.forEach(item => {
          ids.push(item.id);
        });
        this.tableDialog.option.ids = ids;
        this.tableDialog.option.reimbursementId = this.row.id;
        this.tableWatch('tableDialog');
        this.dialog.visible = true;
      },
      tableOldWatch (data) {
        if (data) {
          this.sTable.old = data;
        }
        let step = [];
        let old = this.sTable.old;
        if (this.type4) {
          let string = '';
          switch (this.type4) {
          case 1:
            string = 'oneDepartmentId';
            break;
          case 2:
            string = 'twoDepartmentId';
            break;
          case 3:
            string = 'threeDepartmentId';
            break;
          case 4:
            string = 'fourDepartmentId';
            break;
          case 5:
            string = 'fiveDepartmentId';
            break;
          }
          let j = 0;
          for (let i = 0; i < old.length; i++) {
            if (!old[i].merge) {
              step.push(Object.assign({}, old[i]));
              for (j = (i + 1); j < old.length; j++) {
                if (old[i].supplierRole === 2 &&
                  old[i].type === 'expenseCost' && old[i][string] ===
                  old[j][string] && old[i].supplierId ===
                  old[j].supplierId && old[i].period ===
                  old[j].period && (old[i].bearDepartmentId === null ? true : old[i].bearDepartmentId === old[j].bearDepartmentId)) {
                  let stepLength = step.length - 1;
                  if (typeof step[stepLength].children === 'undefined') {
                    step[stepLength].children = [
                      Object.assign({}, old[i]),
                      Object.assign({}, old[j]),
                    ];
                  } else {
                    step[stepLength].children.push(Object.assign({}, old[j]));
                  }
                  old[j].merge = true;
                  step[stepLength].settleAmout = parseFloat(step[stepLength].settleAmout) + parseFloat(old[j].settleAmout);
                  step[stepLength].debitAmout = parseInt(step[stepLength].debitAmout) + parseInt(old[j].debitAmout);
                  step[stepLength].rewardAmout = parseInt(step[stepLength].rewardAmout) + parseInt(old[j].rewardAmout);
                  step[stepLength].actualSettleAmout = parseFloat(step[stepLength].actualSettleAmout) + parseFloat(old[j].actualSettleAmout);
                  step[stepLength].oilcardSettleAmout = parseInt(step[stepLength].oilcardSettleAmout) + parseInt(old[j].oilcardSettleAmout);
                  step[stepLength].cashAmout = parseFloat(step[stepLength].cashAmout) + parseFloat(old[j].cashAmout);
                  step[stepLength].bankCardSettleAmout = parseFloat(step[stepLength].bankCardSettleAmout) + parseFloat(old[j].bankCardSettleAmout);
                }
              }
            }
          }
        } else {
          old.forEach(item => {
            let iitem = Object.assign({}, item);
            step.push(iitem);
          });
        }
        this.$set(this.sTable, 'data', step);
        this.$emit('change', this.sTable.old);
      },
      dialogSave () {
        if (this.tableDialog.multipleSelection.length === 0) {
          return this.$alert('您还没有选择，请至少选择一条！', '提示');
        }
        let step = this.tableDialog.multipleSelection;
        let json = [];
        let ok = true;
        let message = '';
        step.forEach(item => {
          let obj = {
            ...item,
            bankCardSettleAmout: item.cashAmout,
          };
          json.push(obj);
          if (ok && obj.actualSettleAmout - (item.oilcardSettleAmout + item.cashAmout) - parseInt(item.cleared) < 0) {
            ok = false;
            message = `请仔细核对 费用项目：${obj.costItem}！ 数据异常。`;
          }
        });
        if (!ok) {
          return this.$alert(message, '提示');
        }
        let errors = [];
        let success = [];
        json.forEach(item => {
          let step = this.sTable.old.find(iitem => {
            return iitem.id === item.id;
          });
          if (step) {
            errors.push(item);
          } else {
            success.push(item);
          }
        });
        if (errors.length > 0) {
          let string = '';
          errors.forEach(item => {
            string += item.costItem + ',';
          });
          this.$notify({
            type: 'error',
            title: '发现重复的明细',
            message: `成功 ${success.length}条，失败 ${errors.length}条。其中添加失败的对应项目名称：` + string,
            offset: 100,
          });
        }
        if (success.length > 0) {
          this.tableOldWatch([
            ...this.sTable.old,
            ...success,
          ]);
        }
        this.dialogInit();
      },
    },
    watch: {
      'table.data': function (data) {
        this.$emit('change', data);
      },
      type4: function () {
        this.tableOldWatch();
      },
    },
    mounted: function () {
      if (this.init && this.init.length !== 0) {
        this.tableOldWatch(this.init);
      }
    },
  });
</script>

<style scoped lang="scss">
  .card {
    float: left;
    border-radius: 3px;
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .1);
    height: 110px;
    width: 300px;
    margin: 15px;
    padding: 25px;
    position: relative;
    vertical-align: top;
    transition: .4s;
    cursor: pointer;
    &:hover {
      box-shadow: 0 10px 20px 1px rgba(0, 0, 0, .1);
      text-decoration: none;
    }
  }

  .card__icon {
    font-size: 24px;
    left: 28px;
    position: absolute;
    top: 25px;
    color: #20a0ff;
  }

  .card__title {
    color: #20a0ff;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 40px;
  }

  .card__body {
    line-height: 22px;
    margin-left: 40px;
  }

  @media screen and (max-width: 800px) {
    .card {
      width: calc(100% - 80px);
    }
  }

  .__table .el-card {
    margin: 0;
  }
</style>


<style lang="scss">
  .__table_form {
    .el-form-item {
      width: 100% !important;
    }
  }

  .demo-table-expand {
    font-size: 0;
    background-color: #fbfdff;
    .el-form-item {
      margin-bottom: 0;
    }
    .__content {
      margin-bottom: 10px;
    }
  }

  .__table {
    position: relative;
    .el-form-item {
      .el-form-item__content {
        /*width: calc(100% - 10px);*/
        /*padding-left: 10px;*/
        /*width:100%;*/
        width:calc(100% - 80px);
        >span{
          word-wrap: break-word;
        }
      }
    }
    .__table_button {
      position: absolute;
      z-index: 4;
      width: 42px;
      color: #48576a;
      height: 50px;
      border: none;
      outline: none;
      background: rgba(0, 0, 0, 0);
      transition: all .5s;
      padding: 14px;
      &:hover{
        transform: scale(1.2) rotate(360deg);
        color: #4c77dc;
      }
    }
    .__table_index_button {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      border: none;
      background: rgba(0, 0, 0, 0);
      outline: none;
    }
    .el-table__fixed,.el-table__fixed-right {
      box-shadow: none;
    }
    .el-table-column--selection .cell {
      padding: 0;
    }
    .el-table__expanded-cell{
      .el-form-item {
        margin-bottom: 22px;
        width: calc(20% - 10px);
        .el-form-item__content {
          width:100%;
        }
      }
      z-index: 4;
      .el-form--inline .el-form-item__label{
        color: #4c77dc;
        font-weight: bolder;
      }
    }
    .index {
      .cell {
        padding: 0;
      }
    }
    .operationMore{
      .cell {
        padding: 0;
      }
      .el-button--mini{
        min-width: 22px;
      }
    }
    .el-table__fixed-header-wrapper{
      .index >.cell{
        color: #eef1f6;
      }
    }
    .__reference{
      margin-left: 5px;
    }
    .el-input-number {
      min-width: 80px;
      width: 100%;
    }
  }
</style>
